<template>
	<view class="content">
		<view class="desc-block">
			<image :src="detail.logo?detail.logo:imageUrl+'/job_hunting/job_detail/enterprise.jpg'" class="img">
			</image>
			<view class="desc">
				<view class="company">{{detail.company}}</view>
				<view class="mobile-block">
					<view style="display: flex;align-items: center;">
						<view class="desc-icon iconfont icon-a-24gf-telephone2"></view>
						<view class="desc-text" v-if="detail.mobileHide">{{detail.mobileHide}}</view>
						<view class="desc-text" v-else>暂无</view>
					</view>
					<view v-if="detail.mobileHide" @click="callPhone"
						style="width: 160rpx;height: 70rpx;border: 1px solid #0256FF;border-radius: 60rpx;display: flex;align-items: center;justify-content: center;">
						<i style="color: #0256FF;font-size: 30rpx; margin-right: 10rpx;"
							class="iconfont icon-dianhuatianchong"></i>
						<view style="font-size: 30rpx;color: #0256FF;">拨打</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="text fw fs15">机构简介</view>
			<view class="describe" :class="more?'':'fewer'">
				<mp-html :content="detail.describer" />
			</view>
			<view @click="more=!more" class="time">{{more?'收起':'查看全部'}}</view>
		</view>
		<view class="block">
			<view class="text fw fs15">机构地址</view>
			<view class="address">
				<view style="display: flex;align-items: center; width: calc(100% - 180rpx);">
					<view class="iconfont icon-dingwei"></view>
					<view class="address-content">{{detail.transaddress}}</view>
				</view>
				<view @click="openLocation"
					style="width: 160rpx;height: 70rpx;border: 1px solid #0256FF;border-radius: 60rpx;display: flex;align-items: center;justify-content: center;">
					<i style="color: #0256FF;font-size: 30rpx; margin-right: 10rpx;"
						class="iconfont icon-xitong-weizhipeizhi"></i>
					<view style="font-size: 30rpx;color: #0256FF;">地图</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="text fw fs15">培训资质</view>
			<view class="address">
				<view class="img-item" v-if="detail.qualifications">
					<image :src="detail.qualifications" @click="showBigImg(detail.qualifications)" class="img"></image>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="text fw fs15">培训工种</view>
			<view class="label-item" v-if="detail.typeConfigModelList.length>0">
				<view v-for="(item) in detail.typeConfigModelList" :key="item.id">
					<view class="label" style="margin-top: 20rpx;display: flex;flex-flow: row wrap;">
						<view class="label-list">
							<view class="label"
								@click="navigate('/page_other/train/introduce?configId='+item.configId+'&trainId='+id+'&id='+item.id)">
								{{item.configIdText}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="empty">暂无数据</view>
		</view>
		<!-- <view class="text fw fs15">培训课程</view>
		<template v-if="detail.typeConfigModelList.length>0">
			<view class="block course-block" v-for="item in detail.typeConfigModelList" :key="item.id"
				@click="navigate('/page_other/train/course_detail?id='+item.id)">
				<image :src="item.logo?item.logo:imageUrl+'/job_hunting/job_detail/enterprise.jpg'" class="img">
				</image>
				<view class="course-info">
					<view class="title">{{item.courseName}}</view>
					<view class="course-time">开班时间：{{item.startTime}}至{{item.endTime}}</view>
					<view class="course-wage">{{item.price}}<text class="text1">元</text></view>
				</view>
			</view>
		</template>
		<view class="block course-block" v-else>暂无数据</view> -->
	</view>
	</view>
</template>

<script>
	import {
		getTraining,
		findTrainEnrollApi,
		getMyPublishByPost
	} from '@/api/train.js';
	export default {
		data() {
			return {
				id: null,
				imageUrl: '',
				detail: {
					logo: '',
					mobile: '',
					mobileHide: '',
					trainName: '',
					company: '',
					trainTime: '',
					transaddress: '',
					typeConfigModelList: []
				},
				position: {},
				apply: null,
				type: null,
				label: [],
				more: false,
				courseList: []
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			//点击放大图片
			showBigImg(imgsArray) {
				let arr = [];
				arr.push(imgsArray)
				uni.previewImage({
					current: 0,
					urls: arr //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.mobile,
					success() {
						console.log('拨打成功了');
					},
					fail() {
						console.log('拨打失败了');
					}
				})
			},
			openLocation() {
				uni.openLocation({
					latitude: this.detail.latitude,
					longitude: this.detail.longitude,
					name: this.detail.company,
					success: function() {
						console.log('success');
					}
				});
			},
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getTraining({
					id
				}).then((res) => {
					uni.hideLoading()
					this.detail = res;
					if (res.typeConfigModelList.length > 0) {
						this.courseList = res.typeConfigModelList[0].sonList
					}
					this.detail.mobileHide = this.phoneHide(this.detail.mobile)
				}).catch((res) => {
					uni.hideLoading()
					this.showToast('加载失败，请重试');
				})
			},
			// 手机号做脱敏处理
			phoneHide(phone) {
			    let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
			    phone = phone.replace(reg, '$1****$2');
				console.log(phone)
			    return phone; // 185****6696
			},
			findTrainEnroll() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				findTrainEnrollApi({}).then((res) => {
					uni.hideLoading()
					this.apply = res;
				})
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			}
		},
		onLoad(e) {
			this.imageUrl = this.globalConfig.imageUrl;
			this.getDetail(e.id);
			this.id = e.id;
			this.type = e.type
			// this.findTrainEnroll()
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	$box-shadow: 0 0 10px 0 #efefef;

	.content {
		width: 100%;
		padding: 30rpx;
		background: #FAFAFA;
		position: relative;
		padding-bottom: 120rpx;

		.desc-block {
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}


			.desc {
				width: calc(100% - 180rpx);
				display: flex;
				flex-direction: column;
				margin: 20rpx 0 0rpx 0;

				.company {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.mobile-block {
					display: flex;
					justify-content: space-between;

					.desc-icon {
						width: 30rpx;
						margin-right: 12rpx;
					}

					.iconfont {
						color: #0256FF;
						margin-right: 12rpx;
						font-weight: bold;
						padding-top: 4rpx;
					}

					.desc-text {
						font-size: 30rpx;
					}
				}
			}
		}

		.block {
			width: 100%;
			border-radius: 20rpx;
			background: #fff;
			box-shadow: $box-shadow;
			padding: 20rpx;
			margin-bottom: 30rpx;

			view.text {
				line-height: 2.3;
				font-size: 34rpx;
			}

			.describe.fewer {
				overflow: hidden; // 超出的文本隐藏
				text-overflow: ellipsis; // 溢出用省略号显示
				white-space: nowrap; // 溢出不换行
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
				-webkit-line-clamp: 4; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
				-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）


			}

			.time {
				font-size: 28rpx;
				color: #1777FF;
				text-align: end;
			}

			.address {
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 20rpx;
				justify-content: space-between;

				.icon-dingwei {
					flex-grow: 0;
					color: #999;
					margin-right: 10rpx;
				}

				.address-content {
					flex-grow: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.arrow {
					flex-grow: 0;
					font-size: 24rpx;
				}
			}

			.label-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				width: calc(100% - 16rpx);

				.label-list {
					display: flex;
					flex-direction: row;
					margin-left: 20rpx;
					margin-top: 5rpx;
					margin-bottom: 5rpx;

					.label {
						background: #D9E8FF;
						border-radius: 10rpx;
						color: #1777FF;
						font-size: 28rpx;
						padding: 4rpx 14rpx;

					}
				}
			}
		}

		.block:last-child {
			margin-bottom: 0;
		}

		.text {
			line-height: 2.3;
			font-size: 34rpx;
		}

		.course-block {
			display: flex;
			margin-top: 30rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			.course-info {
				width: calc(100% - 180rpx);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				.course-time {
					color: #767676;
					font-size: 26rpx;
					text-align: start;
				}

				.course-wage {
					color: #0256FF;
					font-size: 30rpx;

					.text1 {
						color: #0256FF;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>